<template>
	<view>		
		<u-subsection :list="state.tabs" @change="onChange"></u-subsection>
		
		<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
		  <image class="avatar" :src="state.wxAvatarUrl"></image>
		</button> 
		<input type="nickname" class="weui-input" placeholder="请输入昵称"/>
		
		<view style="height: calc(100vh - 70rpx); overflow-y: auto;">
			<Todo v-show="state.active == 0" />
			<List v-show="state.active == 1" />
		</view>
	</view>
</template>

<script lang="ts" setup>
import { onLoad } from "@dcloudio/uni-app"
import { reactive } from 'vue'
import { request } from '../../utils/request'
import Todo from './todo.vue'
import List from './list.vue'

const state = reactive({ 
	active: 0,
	tabs: [{ name: '待办', val: 'todo'}, { name: '我参与的审批', val: 'all'}],
	
	wxCode: {} as any,
	wxOpenId: {} as any,
	wxSessionKey: {} as any,
	
	wxAvatarUrl: {} as any
})

const onChange = (index: number) => {
	state.active = index
}

onLoad(() => {
	uni.login({
		onlyAuthorize: true,
		provider: 'weixin',
		success: function (loginRes) {
			state.wxCode = loginRes.code			
			request.get(`/wx/openId?code=${state.wxCode}`).then((resp: any) => {
				console.log(resp)
				state.wxOpenId = resp.data['openid']
				state.wxSessionKey = resp.data['session_key']
			})			
		}
	})
})

const onChooseAvatar = (e) => {
    const { avatarUrl } = e.detail 
		state.wxAvatarUrl = avatarUrl
		console.log(state.wxAvatarUrl)
  }
	
</script>

<style lang="scss" scoped>
</style>
